<template>
  <div id="albumList">
    <!-- 表格 -->
    <el-table :data="albumData" border stripe class="el-table">
      <el-table-column prop="id" label="id" align="center"></el-table-column>
      <el-table-column label="相册封面" align="center">
        <template slot-scope="scope">
          <el-image :src="GLOBAL.OSSImageUrlRoot + 'headerAlbum/' + scope.row.id + '.png'"
            fit="contain" style="height: 80px;"
            :preview-src-list="[GLOBAL.OSSImageUrlRoot + 'headerAlbum/' + scope.row.id + '.png']">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="相册名" align="center"></el-table-column>
      <el-table-column label="操作" fixed="right" align="center">
        <template slot-scope="scope">
          <el-button @click="currentEditAlbum = scope.row; albumFormShow = true;" type="primary" icon="el-icon-edit"
            size="mini"></el-button>
          <el-button @click="currentEditAlbum = scope.row; albumDeleteShow = true;" type="primary" icon="el-icon-delete"
            size="mini"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 删除提示框 -->
    <el-dialog title="提示" :visible.sync="albumDeleteShow" width="30%">
      <span>确定删除该相册么，相册中所有的内容都会被删除！</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="albumDeleteShow = false">取 消</el-button>
        <el-button type="primary" @click="deleteAlbum(); albumDeleteShow = false;">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑提示框 -->
    <el-dialog title="编辑相册" :visible.sync="albumFormShow">
      <el-form :model="currentEditAlbum">
        <el-form-item>
          <span>id：{{ currentEditAlbum.id }}</span>
        </el-form-item>
        <el-form-item label="封面图片上传">
          <el-upload class="upload-demo" :action="uploadUrl" :before-upload="beforeImgUpload" auto-upload
            :headers="imgUploadHeaders" :on-error="imgUploadError" :on-success="imgUploadSuccess" :limit="1"
            :on-exceed="handleExceed" accept=".jpg, .png" list-type="picture" :multiple="false" :file-list="fileList"
            name="file">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，无需点击提交自动上传</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="相册名称">
          <el-input type="input" v-model="currentEditAlbum.name" clearable placeholder="请输入相册名称"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="albumFormShow = false">取 消</el-button>
        <el-button type="primary" @click="albumEdit(); albumFormShow = false">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      albumData: [], // 相册数据
      currentEditAlbum: {}, // 当前选中的相册数据
      albumFormShow: false, // 控制相册编辑提示框的显示/隐藏
      albumDeleteShow: false, // 控制相册删除提示框的显示/隐藏
      fileList: [], // 上传图片list
      imgUploadHeaders: { 'Token': sessionStorage.getItem('token') }, // 请求头token信息，用于后端认证
    }
  },
  computed: {
    uploadUrl() { // 请求上传图片的url地址
      return  this.$axios.defaults.baseURL + '/album/login/uploadHeader/' + this.currentEditAlbum.id
    },
  },
  methods: {
    // 获取相册数据
    getAlbumData() {
      this.$axios({
        method: 'post',
        url: '/album/getAllAlbum'
      }).then(res => {
        this.albumData = res.data
      })
    },
    // 删除相册事件
    deleteAlbum() {
      this.$axios({
        method: 'post',
        url: '/album/login/deleteAlbum/' + this.currentEditAlbum.id
      }).then(res => {
        if (res.data) {
          this.$router.go(0) // 刷新页面
          this.$message({
            showClose: true,
            message: '删除成功',
            type: 'success'
          })
        } else {
          this.$message({
            showClose: true,
            message: '删除失败，出现错误了X.X',
            type: 'error'
          })
        }
      })
    },
    // 更新相册事件
    albumEdit() {
      if(this.currentEditAlbum.name == null || this.currentEditAlbum.name == '') {
        this.$message({
          message: '相册名称不能为空哦~',
          type: 'error',
          showClose: true
        })
        return 
      }
      this.$axios({
        method: 'post',
        url: '/album/login/updateAlbumName/' + this.currentEditAlbum.id + '/' + this.currentEditAlbum.name
      }).then(res => {
        if (res.data) {
          this.$router.go(0) // 刷新页面
          this.$message({
            showClose: true,
            message: '提交成功',
            type: 'success'
          })
        } else {
          this.$message({
            showClose: true,
            message: '提交失败，出现错误了X.X',
            type: 'error'
          })
        }
      })
    },
    // 处理图片上传多了的提示事件
    handleExceed() {
      this.$message({
        type: 'error',
        message: '限制只能上传一个文件哦',
        showClose: true,
      })
    },
    // 图片文件上传出现错误的提示事件
    imgUploadError() {
      this.$message({
        message: '文件上传出现错误X.X',
        type: 'error',
        showClose: true,
      })
    },
    // 图片文件上传成功的提示事件
    imgUploadSuccess() {
      this.$message({
        message: '上传成功',
        type: 'success',
        showClose: true
      })
    },
    // 图片文件上传前的文件类型检查
    beforeImgUpload(file) {
      if (this.getfileName(file.name) != '.jpg' && this.getfileName(file.name) != '.png') {
        this.$message({
          message: '上传封面图片文件格式只能为jpg或png',
          type: 'error',
          showClose: true,
        })
        return false
      }
    },
    // 获取文件后缀工具函数
    getfileName(filename) {
      // 转换为小写
      const pos = filename.toLowerCase().lastIndexOf('.')
      let suffix = ''
      if (pos !== -1) {
        suffix = filename.substring(pos)
      }
      return suffix
    },
  },
  mounted() {
    this.getAlbumData()
  },
}
</script>

<style scoped="scoped">
/* 表格 */
.el-table {
  width: 80%;
  margin: 0 auto;
  border-radius: 20px;
}

.el-table__row {
  background-color: rgba(0, 0, 0, 0);
}

/deep/.el-table--border {
  border-color: #464646;
}

/deep/.el-table th.el-table__cell.is-leaf {
  border-color: #464646;
}

/deep/ .el-table thead tr>th {
  background-color: #202020 !important;
  color: #464646;
  border-color: #464646;
}

/deep/ .el-table tbody tr>td {
  background-color: #202020 !important;
  border-color: #464646;
}

/deep/.el-table::before,
/deep/.el-table__fixed-right::before {
  background-color: rgba(0, 0, 0, 0);
}
/deep/.el-table__empty-block {
    background-color: #202020;
}
.cell .el-button--primary {
  margin-bottom: 10px;
}
/deep/.el-table__body-wrapper {
    border-bottom: 1px solid;
}
</style>